import React, { useRef, useEffect, useState } from 'react';
import { Image } from 'antd-mobile';

export interface QuickSwiperItem {
    imgUrl?: string;
    title?: string;
}

export interface QuickSwiperProps {
    row?: number;
    data?: QuickSwiperItem[];
}

const defaultProps = {
    row: 5,
    data: [
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        },
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        },
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        },
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        },
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        },
        {
            imgUrl: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
            title: '上新精选'
        }
    ]
}

const QuickSwiper: React.FC<QuickSwiperProps> = (props) => {
    const {
        row,
        data,
        ...rest
    } = {
        ...defaultProps,
        ...props
    };
    const [itemWidth, setItemWidth] = useState('');
    const swiperRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const calculateItemWidth = () => {
            const w = 100;
            let itemWidth = w && w / row || 0;
            setItemWidth(`${itemWidth}%`);
        };
    
        // 初始计算
        calculateItemWidth();
    
        // 监听窗口大小变化
        window.addEventListener('resize', calculateItemWidth);
    
        // 清理事件监听器
        return () => {
            window.removeEventListener('resize', calculateItemWidth);
        };
    }, []);

    return (
        <>
            <div className='seal-quick-swiper' >
                <div className='seal-quick-swiper__inner' ref={swiperRef} >
                    <div className='seal-quick-swiper-wrapper'>
                        <div className='seal-quick-swiper__main'>
                            {
                                data.map((item, index) => (
                                    <div className='seal-quick-swiper__item' key={index} style={{ width: itemWidth}}>
                                       <div className='seal-quick-swiper__item__img'>
                                            <Image src={item.imgUrl} />
                                        </div>
                                        <div className='seal-quick-swiper__item__title'>{item.title}</div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default QuickSwiper;